// Copyright (c) Microsoft. All rights reserved.

@import 'src/styles/themes';
@import 'src/styles/mixins';
@import 'src/styles/variables';
@import "node_modules/react-select/scss/select";
@import "node_modules/react-select/scss/mixins";
@import "node_modules/react-select/scss/spinner";

$selectFontSize: 14px;
$select-input-height: 26px;
$select-menu-max-height: 226px;
$select-padding-vertical: 6px;
$select-padding-horizontal: 8px;

// TODO: Consolidate all of the themeify calls
//       into a single call at the end of the file

// Control
// ------------------------------

.select-container.Select {
  position: relative;

  // preferred box model
  &,
  & div,
  & input,
  & span {
    top: 0;
    @include box-sizing(border-box);
  }

  &.long { @include rem-fallback(width, 248px); }

  &.short { @include rem-fallback(width, 124px); }

  // handle disabled state
  &.is-disabled > .Select-control:hover { box-shadow: none; }

  &.is-disabled .Select-arrow-zone {
    cursor: default;
    pointer-events: none;
  }

  // base
  .Select-control {
    border-style: solid;
    cursor: default;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-spacing: 0;
    border-collapse: separate;
    outline: none;
    overflow: hidden;
    position: relative;
    width: 100%;
    @include rem-fallback(height, $select-input-height);

    .Select-input:focus { outline: none; }
  }

  .is-searchable .is-open > .Select-control { cursor: text; }

  .is-open > .Select-control {
    @include border-bottom-radius( 0 );

    // flip the arrow so its pointing up when the menu is open
    .Select-arrow {
      border-color: transparent transparent $select-arrow-color;
      @include rem-fallback(top, -2px);
      @include rem-fallback(border-top-width, 0px);
      @include rem-fallback(border-right-width, $select-arrow-width);
      @include rem-fallback(border-left-width, $select-arrow-width);
      @include rem-fallback(border-bottom-width, $select-arrow-width);
    }
  }

  .is-searchable .is-focused:not(.is-open) > .Select-control { cursor: text; }

  .is-focused:not(.is-open) > .Select-control { box-shadow: $select-input-box-shadow-focus; }

  // placeholder
  .Select-placeholder,
  .Select--single > .Select-control .Select-value {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;

    // crop text
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    @include rem-fallback(line-height, 24px);
    @include rem-fallback(padding-right, $select-padding-horizontal);
    @include rem-fallback(padding-left, $select-padding-horizontal);
  }

  .has-value.is-clearable.Select--single > .Select-control .Select-value { @include rem-fallback(padding-right, ($select-clear-width + $select-arrow-width * 5)); }

  .has-value.Select--single > .Select-control .Select-value,
  .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value {
    .Select-value-label {
      @include rem-font-size($selectFontSize);
    }

    a.Select-value-label {
      cursor: pointer;
      text-decoration: none;

      &:hover,
      &:focus {
        outline: none;
        text-decoration: underline;
      }
    }
  }

  .Select-multi-value-wrapper { width: 100%; }

  // the <input> element users type in
  .Select-input {
    // inherits `display: inline-block` from "react-input-autosize"
    vertical-align: middle;
    position: absolute;
    @include rem-fallback(height, 24px);
    @include rem-fallback(padding-right, $select-padding-horizontal);
    @include rem-fallback(padding-left, $select-padding-horizontal);

    > input {
      background: none transparent;
      border: 0 none;
      box-shadow: none;
      cursor: default;
      display: inline-block;
      font-family: inherit;
      font-size: inherit;
      margin: 0;
      outline: none;
      padding: 3 0 7; /* For IE 8 compatibility */
      -webkit-appearance: none;
      position: relative;
      @include rem-fallback(line-height, $selectFontSize);
      @include rem-fallback(padding-top, 3px);

      .is-focused & { cursor: text; }
    }
  }

  .Select-value { @include rem-fallback(margin-left, $select-padding-horizontal); }

  // fake-hide the input when the control is pseudo-focused
  .has-value.is-pseudo-focused .Select-input { opacity: 0; }

  // fake input
  .Select-control:not(.is-searchable) > .Select-input { outline: none; }

  // loading indicator
  .Select-loading-zone {
    cursor: pointer;
    display: table-cell;
    position: relative;
    text-align: center;
    vertical-align: middle;
    @include rem-fallback(width, $select-loading-size);
  }

  .Select-loading {
    @include Select-spinner($select-loading-size, $select-loading-color-bg, $select-loading-color);
    vertical-align: middle;
  }

  // the little cross that clears the field
  .Select-clear-zone {
    @include animation( Select-animation-fadeIn 200ms );
    color: $select-clear-color;
    cursor: pointer;
    display: table-cell;
    position: relative;
    text-align: center;
    vertical-align: middle;
    @include rem-fallback(width, $select-clear-width);

    &:hover { color: $select-clear-hover-color; }
  }

  .Select-clear {
    display: inline-block;
    font-size: $select-clear-size;
    line-height: 1;
  }

  .Select--multi .Select-clear-zone { @include rem-fallback(width, $select-clear-width); }

  .Select--multi .Select-multi-value-wrapper { display: inline-block; }

  .Select .Select-aria-only {
    display: inline-block;
    @include rem-fallback(height, 1px);
    @include rem-fallback(width, 1px);
    @include rem-fallback(margin, -1px);
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
    float: left;
  }

  // arrow indicator
  .Select-arrow-zone {
    cursor: pointer;
    display: table-cell;
    position: relative;
    text-align: center;
    vertical-align: middle;
    @include rem-fallback(width, $select-arrow-width * 5);
  }

  .Select-arrow {
    border-color: $select-arrow-color transparent transparent;
    border-style: solid;
    display: inline-block;
    height: 0;
    width: 0;
    top: 0;
    position: relative;
    @include rem-fallback(border-top-width, $select-arrow-width);
    @include rem-fallback(border-right-width, $select-arrow-width);
    @include rem-fallback(border-left-width, $select-arrow-width);
    @include rem-fallback(border-bottom-width, ($select-arrow-width / 2));
  }

  .is-open .Select-arrow, .Select-arrow-zone:hover > .Select-arrow { border-top-color: $select-arrow-color-hover; }

  // Animation
  // ------------------------------

  // fade in
  @-webkit-keyframes Select-animation-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes Select-animation-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  //
  // Select Menu
  // ------------------------------

  // wrapper around the menu
  .Select-menu-outer {
    // Unfortunately, having both border-radius and allows scrolling using overflow defined on the same
    // element forces the browser to repaint on scroll.  However, if these definitions are split into an
    // outer and an inner element, the browser is able to optimize the scrolling behavior and does not
    // have to repaint on scroll.
    box-shadow: $select-menu-box-shadow;
    box-sizing: border-box;
    position: absolute;
    top: 100%;
    z-index: $select-menu-zindex;
    -webkit-overflow-scrolling: touch;
    @include rem-fallback(width, calc(100%));
    @include rem-fallback(margin-top, -1px);
    @include rem-fallback(max-height, $select-menu-max-height);
    @include rem-font-size($selectFontSize);
  }

  // wrapper
  .Select-menu {
    overflow-y: auto;
    @include rem-fallback(max-height, 224px);
  }

  // options
  .Select-option {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    @include rem-fallback(padding-top, $select-padding-vertical);
    @include rem-fallback(padding-bottom, $select-padding-vertical);
    @include rem-fallback(padding-right, $select-padding-horizontal);
    @include rem-fallback(padding-left, $select-padding-horizontal);

    &:last-child { @include border-bottom-radius( $select-input-border-radius ); }
  }

  // no results
  .Select-noresults {
    box-sizing: border-box;
    color: $select-noresults-color;
    cursor: default;
    display: block;
    padding: $select-padding-vertical $select-padding-horizontal;
  }

  //
  // Multi-Select
  // ------------------------------

  // Base
  .Select--multi {
    // add margin to the input element
    .Select-input {
      vertical-align: middle;
      padding: 0;
      @include rem-fallback(margin-left, $select-padding-horizontal);
    }

    // reduce margin once there is value
    &.has-value .Select-input { @include rem-fallback(margin-left, $select-item-gutter); }

    // Items
    .Select-value {
      display: inline-block;
      vertical-align: top;
      @include rem-fallback(margin-left, $select-item-gutter);
      @include rem-fallback(margin-top, $select-item-gutter);
      @include rem-font-size($selectFontSize);
    }

    // common
    .Select-value-icon,
    .Select-value-label {
      display: inline-block;
      vertical-align: middle;
    }

    // label
    .Select-value-label {
      cursor: default;
      padding: $select-item-padding-vertical $select-item-padding-horizontal;
      @include border-right-radius( $select-item-border-radius );
    }

    a.Select-value-label {
      cursor: pointer;
      text-decoration: none;

      &:hover { text-decoration: underline; }
    }

    // icon
    .Select-value-icon {
      cursor: pointer;
      // move the baseline up by 1px
      padding: ($select-item-padding-vertical - 1) $select-item-padding-horizontal ($select-item-padding-vertical + 1);
      @include border-left-radius( $select-item-border-radius );
    }
  }

  .Select--multi.is-disabled .Select-value-icon {
    cursor: not-allowed;
  }

  @include themify($themes) {
    &.is-disabled > .Select-control { background-color: themed('colorSelectDisabledText'); }

    .Select-control {
      background-color: themed('colorSelectBackground');
      border: 1px solid themed('colorInputBorderColor');
      color: themed('colorSelectText');

      &:hover,
      &:focus { border-color: themed('colorInputBorderHoverColor'); }
    }

    &.error .Select-control { border-color: themed('colorAlert'); }

    .is-open > .Select-control {
      background: themed('colorSelectBackground');
      border-color: themed('colorSelectBorderColor');
    }

    .is-focused:not(.is-open) > .Select-control { border-color: themed('colorSelectBorderColor'); }

    .Select-placeholder,
    .Select--single > .Select-control .Select-value {
        color: themed('colorSelectPlaceholderText');
    }

    .has-value.Select--single > .Select-control .Select-value,
    .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value {
      .Select-value-label { color: themed('colorSelectText'); }

      a.Select-value-label {
        &:hover,
        &:focus { color: themed('colorSelectBorderColor');
        }
      }
    }

    .Select-input > input { color: themed('colorSelectText'); }

    .Select-menu-outer {
        background-color: themed('colorSelectBackground');
        border: 1px solid themed('colorInputBorderColor');
        border-top-color: mix(
          themed('colorSelectBackground'),
          themed('colorSelectBorderColor'),
          50%
        );
    }

    .Select-option {
      background-color: themed('colorSelectBackground');
      color: themed('colorSelectText');

      &.is-selected {
        background-color: themed('colorSelectOptionFocusedBg');
        color: themed('colorSelectText');
      }

      &.is-focused {
        background-color: themed('colorSelectOptionFocusedBg');
        color: themed('colorSelectText');
      }

      &.is-disabled {
        color: themed('colorSelectDisabledText');
        cursor: default;
      }
    }

    .Select--multi {
      .Select-value {
        background-color: themed('colorSelectBackground');
        border: 1px solid themed('colorSelectBorderColor');
        color: themed('colorSelectText');
      }

      a.Select-value-label { color: themed('colorSelectText'); }

      // icon
      .Select-value-icon {
        border-right: 1px solid themed('colorSelectBorderColor');

        &:hover,
        &:focus {
          background-color: themed('colorSelectOptionFocusedBg');
          color: themed('colorSelectText');
        }

        &:active { background-color: themed('colorSelectBorderColor'); }
      }
    }

    .Select--multi.is-disabled {
      .Select-value {
        background-color: themed('colorSelectBackground');
        border: 1px solid themed('colorSelectBorderColor');
        color: themed('colorSelectDisabledText');
      }

      .Select-value-icon {
        border-right-color: themed('colorSelectBorderColor');

        &:hover,
        &:focus,
        &:active { background-color: themed('colorSelectBackground'); }
      }
    }
  }
}
